<template>
	<div class="fuzhu">
		<!-- 隐藏的登录注册页面-->
		<div class="hei" v-if="showhei" @click="heinone">
			<div class="login_box">
				<div class="button_login">
					<span>登录</span><span><a href="./register">注册</a></span>
				</div>
				<!-- 下横线 -->
				<div class="border_bottom">
					<div></div>
					<div></div>
				</div>
				<!-- 手机输入框和密码输入框 -->
				<div class="neirong">
					<!-- 手机号 -->
					<div class="mytel">
						<input
							type="text"
							name=""
							placeholder="请输入手机号"
							v-model.lazy="tel"
						/>
					</div>
					<div v-if="showtel" class="yingchang">
						<span>*请输入正确的手机号 </span>
					</div>
					<!-- 密码 -->
					<div class="mytel">
						<input
							type="password"
							name=""
							placeholder="请输入密码"
							v-model.lazy="password"
						/>
					</div>
				</div>
				<!-- <div class="myjizu">记到密码</div> -->
				<div class="mywangji">忘记密码?</div>
		
				<div class="mytel">
					<div class="denglu_botton" @click="setlogin">登录</div>
				</div>
		
				<div class="myxieyi">
					注册登录即代表同意 《花瓣用户协议》 《花瓣隐私政策》
				</div>
			</div>
		</div>
		
		<!-- 隐藏让上传居中盒子  -->
		<div class="ShuangChuan" v-if="showshang">
			<!-- 上传盒子  -->
		
			<div class="ShuangChuanHanBan">
				<!-- 左边的大盒子 -->
				<div class="scleftbox">
					<!-- 预览的大图片 -->
					<div class="yulantu">
						<img :src="tupian2" alt="" />
					</div>
		
					<!-- 描述的输入多行 -->
					<div class="miaosu">
						<textarea
							class="getmiaoshu"
							name=""
							id=""
							cols="30"
							rows="10"
							placeholder="为作品添加描述"
							v-model="duohangshuru"
						></textarea>
					</div>
		
					<!-- 标签的输入 -->
					<div class="biaoqian">
						<textarea
							class="gitbiaoqian"
							name=""
							id=""
							cols="30"
							rows="10"
							placeholder="为作品添加标签"
							v-model="biaoxianshuru"
						></textarea>
					</div>
		
					<!-- 提示的输入-->
					<div class="tishibox">
						<div class="tishi">
							<textarea
								class="gettishi"
								name=""
								id=""
								cols="30"
								rows="10"
								placeholder="添加提示词Prompt"
								v-model="tishishuru"
							></textarea>
						</div>
					</div>
				</div>
		
				<!-- 左边的大盒子 -->
				<div class="scrightbox">
					<div class="fontup"><span>上传采集 </span></div>
		
					<!-- 判断画板和类型 -->
					<div class="neixing">
						<!-- 判断画板 -->
						<input
							type="text"
							placeholder="画板"
							v-model="huabanshuru"
						/>
		
						<!--  选择类型 下拉菜单 -->
						<select
							style="z-index: 1"
							class="xiala"
							onmousedown="if(this.options.length>6){this.size=7}"
							onblur="this.size=0"
							onchange="this.size=0"
							v-model="selectedOption"
						>
							<option value="插画/漫画">插画/漫画</option>
							<option value="UI/UX">UI/UX</option>
							<option value="平面">平面</option>
							<option value="摄影">摄影</option>
							<option value="游戏">游戏</option>
							<option value="动漫">动漫</option>
							<option value="工业设计">工业设计</option>
							<option value="建筑设计">建筑设计</option>
							<option value="家居">家居</option>
							<option value="人文艺术">人文艺术</option>
							<option value="女士/搭配">女士/搭配</option>
							<option value="男生/时尚">男生/时尚</option>
							<option value="造型/美妆">造型/美妆</option>
							<option value="手工/布艺">手工/布艺</option>
							<option value="美食">美食</option>
							<option value="旅行">旅行</option>
							<option value="婚礼">婚礼</option>
							<option value="儿童">儿童</option>
							<option value="宠物">宠物</option>
							<option value="美图">美图</option>
							<option value="明星">明星</option>
							<option value="美女">美女</option>
							<option value="礼物">礼物</option>
							<option value="极客">极客</option>
							<option value="数据图">数据图</option>
							<option value="汽车/摩托">汽车/摩托</option>
							<option value="电影/图书">电影/图书</option>
							<option value="生活百科">生活百科</option>
							<option value="教育">教育</option>
							<option value="运动">运动</option>
							<option value="搞笑">搞笑</option>
						</select>
					</div>
		
					<!-- 点击上传的时候预览多张图片 -->
					<div class="shuangchuantu">
						<!-- <img src="tupian" alt="" /> -->
						<div><img class="mytu" :src="tupian" alt="" /></div>
						<!-- 
		      <div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div> -->
					</div>
		
					<!-- 点击上传图片 -->
					<div class="dianjitianjia">
						<!-- multiple -->
						<input
							id="xuanzhe"
							type="file"
							accept="image/*,.heic,.psd,.heif"
							name=""
							@change="shangcuanshijian"
						/>
						<span class="fenshe iconfont icon-baozi-01"
							>点击添加图片</span
						>
					</div>
		
					<!-- 点击上传取消 图片按钮 -->
					<div class="anniubox">
						<button>取消</button>
						<button @click="myshangchuan">上传</button>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 首页标题 和 推荐内容 -->
		<div>
			<div class="nav">
				<!-- 图标 -->
				<div class="navbox">
					<router-link to='/'>
						<img
								src="https://st0.dancf.com/static/02/202306090204-51f4.png"
								alt=""
								class="huaban"
						/>
					</router-link>
					<!-- <a href="">
						
						<img
							src="https://st0.dancf.com/static/02/202306090204-51f4.png"
							alt=""
							class="huaban"
					/></a> -->
				</div>
				<!-- 标题 -->
				<div class="biaoti">
					<span v-if="showguanzu" class="guanzu">
						<!-- <a href="">关注</a> -->
						<router-link to='/follow'>关注</router-link>
					</span>
					<span>
						<!-- <a href="">发现</a> -->
						<router-link to='/discovery'>发现</router-link>
					</span>
					<span>
						<!-- <a href="">素材</a> -->
						<router-link to='/materials'>素材</router-link>
					</span>
					<span>
						<!-- <a href="">大赛</a> -->
						<router-link to='/activities'>大赛</router-link>
					</span>
				</div>
				<!-- 搜索框 -->
				<div class="shousuobox">
					<div class="fangdajing_box">
						<span class="iconfont icon-fangdajing"></span>
					</div>
					<input class="shousuo" type="text" name="" id="" />
					<div>隐藏</div>
				</div>
				<!--  广告图片-->
				<div>
					<a href=""
						><img
							src="https://gd-hbimg-other.huaban.com/aa3e40c7c062249765524e77687a6b2d656ce7c01697108587sOdN8WxA?x-oss-process=image/resize,h_32/sharpen,80/interlace,1"
							alt=""
					/></a>
				</div>
				<!-- 添加画板 -->
				<div v-if="showhuaban" @click="upload()">
					<span class="iconfont icon-jiahao- huaban"></span>
					<!-- 花瓣详细 -->
					<div
						class="huabanmokuai"
						@mouseleave="leave()"
						v-if="showupload"
					>
						<div class="shangchuangcaiji" @click="showbigchuan">
							<span class="iconfont icon-chajian"></span
							><span>上传采集</span>
						</div>
						<div>
							<span class="iconfont icon-shangchuan"></span
							><span>上传画板</span>
						</div>
						<div>
							<span class="iconfont icon-zhuomian"></span
							><span>去桌面端上传</span>
						</div>
						<div>
							<span class="iconfont icon-w_huaban"></span
							><span>浏览器插件</span>
						</div>
					</div>
				</div>
		
				<!-- 拓展方块  -->
				<span class="iconfont icon-yingyongzhongxin"></span>
		
				<!-- 登录注册 -->
				<div class="login_button" @click="fn()" v-if="showdenglu">
					登录/注册
					<!-- <a href="./register"></a> -->
				</div>
		
				<!-- 登录成功后显示头像 -->
				<div class="touxiang" v-if="showtouxiang">
					<span class="iconfont icon-morentouxiang"></span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, getCurrentInstance, watch, onMounted } from 'vue';
let { proxy } = getCurrentInstance();

// 一加载就获取缓存
let islogin = ref('');
onMounted(() => {
	islogin.value =
		window.localStorage.getItem('isLogin') ||
		window.sessionStorage.getItem('isLogin');
});
onMounted(() => {
	console.log(islogin.value);
	if (islogin.value == 'OK') {
		showdenglu.value = false;
		showhuaban.value = true;
		showguanzu.value = true;
		showtouxiang.value = true;
		// showhei.value = false;
	}
});

// 点击显示
let showhei = ref(false);
let fn = () => {
	console.log(6666);
	showhei.value = !showhei.value;
};

//点击黑盒子隐藏
let heinone = (e) => {
	// console.log(e.target.className);
	// console.log(e.target.toString());
	if (e.target.className == 'hei') {
		showhei.value = !showhei.value;
	}
};

//手机正则表达式
let tel = ref('');
let showtel = ref(false);
watch(tel, (newtel) => {
	// console.log(66);
	// console.log(tel);
	let regtel = /^1[3-9][0-9]{9}$/;
	showtel.value = !regtel.test(tel.value);
});

//显示登录
let showdenglu = ref(true);
//显示上传画板
let showhuaban = ref(false);

//显示关注
let showguanzu = ref(false);
//显示头像
let showtouxiang = ref(false);

//点击登录发起网络请求
let password = ref('');
let setlogin = async () => {
	console.log('点击了登录1');
	if (showtel.value) {
		return false;
	}
	let res = await proxy.$axios.post('/egg/login', {
		tel: tel.value,
		password: password.value,
	});
	console.log(res.data);
	window.alert(res.data.data);

	//隐藏登录 显示头像 上传 和关注 以及关闭登录窗口
	if (res.data.code == 1) {
		showdenglu.value = false;
		showhuaban.value = true;
		showguanzu.value = true;
		showtouxiang.value = true;
		showhei.value = false;
		window.localStorage.setItem('isLogin', 'OK');
	}
};

let showupload = ref(false);
//显示下拉框
let upload = () => {
	console.log(666);
	showupload.value = true;
};

let showbigchuan = () => {
	showshang.value = true;
	if ((showshang.value = true)) {
		showhuaban = ref(false);
	}
};

let leave = () => {
	console.log('离开');
	// showupload.value = false;/////////////////////////////////////////////////////////////
};

// 预览图地址
let tupian = ref(
	'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F08%2F20170808104131_i4TJ3.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1701244056&t=3db87594bf30d14f285671d7b7926ad9'
);

//大图地址
let tupian2 = ref(
	' https://img1.baidu.com/it/u=2455470861,3204067353&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=506'
);

//上传图片的地址
let myimg = ref();

// 点击按钮的上传图片
let xuanran = ref();
let shangcuanshijian = async (e) => {
	console.log(e.target.files);
	console.log(e.target.files[0]);

	let file = e.target.files[0];
	let reader = new FileReader();
	reader.onload = function (e) {
		tupian.value = e.target.result;
	};
	reader.readAsDataURL(file);

	let formData = new FormData();
	formData.append('photo', e.target.files[0]);
	let res = await proxy.$axios.post('/egg/getimg', formData);
	xuanran = res.data.data;
	console.log(res.data);
	console.log(res.data.url);
	myimg.value = res.data.url;
};

// 多行
let duohangshuru = ref();
//标签
let biaoxianshuru = ref();
//提示
let tishishuru = ref();
//画板
let huabanshuru = ref();
//下拉输入
let selectedOption = ref('插画/漫画');

//隐藏
let showshang = ref(false);
let myshangchuan = async () => {
	if (duohangshuru.value == undefined) {
		alert('请输入描述');
		return;
	}
	if (biaoxianshuru.value == undefined) {
		alert('请输入标签');
		return;
	}
	if (tishishuru.value == undefined) {
		alert('请输入提示');
		return;
	}

	if (huabanshuru.value == undefined) {
		alert('请输入画板');
		return;
	}
	if (selectedOption.value == undefined) {
		alert('请输入类型');
		return;
	}
	if (myimg.value == undefined) {
		alert('请选择图片');
		return;
	}

	// 画板路由请求
	let res = await proxy.$axios.post('/egg/huaban', {
		describe: duohangshuru.value,
		label: biaoxianshuru.value,
		hint: tishishuru.value,
		drawingBoard: huabanshuru.value,
		sort: selectedOption.value,
		myimg: myimg.value,
	});
	console.log(res.data.code);
	alert(res.data.data);
	//上传成功关闭上传窗口
	if (res.data.code == 1) {
		showshang.value = false;
		showhuaban.value = true;
		showupload.value = false;
	}
};
</script>

<!-- CSS样式 -->
<style scoped>
/* 导入阿里巴巴图标 */
@import url(https://at.alicdn.com/t/c/font_4298458_gkz1c6ryi2d.css);

* {
	margin: 0px;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
	border: 0;
}
a {
	text-decoration: none;
	color: #a4a8aa;
}
.fuzhu {
	z-index: 999;
}
/* 导航大盒子 */
.nav {
	height: 60px;
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 10px;
}

/* tupiandaxiao */
.mytu {
}
/* logo盒子 */
.navbox {
	margin-left: 30px;
}
/* 花logo大小 */
.huaban {
	width: 24px;
	height: 24px;
}
/* 搜索的大盒子 */
.shousuobox {
	width: 740px;
	height: 40px;
	border-radius: 25px;
	background-color: rgb(31, 182, 149);
	display: flex;
	align-items: center;
	background-color: #edf2f5;
}
/* 放大镜大小 */
.icon-fangdajing {
	font-size: 20px;
	color: #a4a8aa;
}
/* 放大镜盒子 */
.fangdajing_box {
	display: flex;
	align-items: center;
	height: 38px;
	width: 20px;
	margin-left: 14px;
}
/* input 搜索框 */
.shousuo {
	width: 650px;
	height: 38px;
	outline: none; /* 移除默认边框 */
	border: none;
	margin-left: 4px;
	background-color: #edf2f5;
}
/* 应用中心图标 */
.icon-yingyongzhongxin {
	font-size: 20px;
}
/* 登录按钮 */
.login_button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 94px;
	height: 40px;
	box-sizing: border-box;
	border-radius: 20px;
	background-color: #ff5967;
	color: #fff;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	font-size: 15px;
	margin-right: 26px;
}
.login_button a {
	color: #ffffff;
}
/* 标题盒子 */
.biaoti {
	width: 200px;
	/* border: 1px solid red; */
}
.biaoti > span {
	margin-right: 16px;
	font-size: 16px;
	font-weight: 600;
	color: rgba(175, 177, 182);
}

/* 登录 */
.login_box {
	width: 450px;
	height: 480px;
	background-color: #f1efef;
	margin-top: 70px;
	border-radius: 25px;
	/* display: flex;
	justify-content: center;
	align-items: center; */
}
/* 黑色背景大盒子 */
.hei {
	display: flex;
	justify-content: center;
	position: fixed;
	background-color: aqua;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
}

/* 登录注册的盒子 */
.button_login {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
	/* width: 430px; */
	height: 40px;
}
/* 登录span */
.button_login > span {
	text-align: center;
	font-weight: 600;
	font-size: 24px;
	line-height: 150%;
	margin-left: 20px;
	margin-right: 20px;
}
/* a标签颜色 */
.button_login > span > a {
	color: #383838;
}
/* 登录注册按钮 */
.border_bottom {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 2px;
}
/* 下换线的盒子 */
.border_bottom > div {
	text-align: center;
	font-weight: 600;
	font-size: 24px;
	line-height: 150%;
	margin-left: 20px;
	margin-right: 20px;
	width: 48px;
	border-top: 3px solid rgba(0, 0, 0, 0.6);
	border-radius: 2.5px;
}

.mytel {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 35px;
}
.mytel > input {
	width: 360px;
	height: 46px;
	border-radius: 10px;
	border: 1px solid #bbbbbb;
}
/* 忘记密码 */
.mywangji {
	margin-top: 15px;
	display: flex;
	justify-content: end;
	font-size: 14px;
	line-height: 24px;
	color: #1c1f23;
	margin-right: 48px;
}

.denglu_botton {
	width: 360px;
	height: 46px;
	border-radius: 10px;
	border: 1px solid #bbbbbb;
	margin-top: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	height: 46px;
	background-color: #ff5967;
	color: #ffffff;
}
/* 协议 */
.myxieyi {
	margin-top: 55px;
	display: flex;
	justify-content: end;
	font-size: 14px;
	line-height: 24px;
	color: #1c1f23;
	margin-right: 48px;
}

.yingchang {
	display: flex;
	justify-content: center;
	text-align: center;
	margin-right: 196px;
}
.yingchang span {
	text-align: center;
	line-height: 21px;
	color: #ff5967;
}

/* 登录成功后关注 */
.guanzu {
	/* margin-left: 5px; */
}
/* 头像图标盒子 */
.touxiang {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 40px;
	margin-right: 10px;
}
/* 头像图标 */
.icon-morentouxiang {
	font-size: 32px;
}

/* 登录成功后添加 */
.huaban {
	font-size: 20px;
	position: relative;
}
/* 添加上传的下拉框 */
.huabanmokuai {
	width: 240px;
	height: 220px;
	background-color: #e8e8e8;
	position: absolute;
	top: 55px;
	right: 118px;
	border-radius: 25px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
/* 装上传 画板 桌面的盒子 */
.huabanmokuai > div {
	width: 220px;
	height: 50px;
	display: flex;
	/* justify-content: center; */
	align-items: center;
}
/* 上传盒子里面的span */
.huabanmokuai > div > :nth-child(1) {
	font-size: 20px;
	margin-right: 10px;
	margin-left: 18px;
}
/* 鼠标移入 突出显示上传盒子 */
.shangchuangcaiji:hover {
	background-color: #cecece;
	border-radius: 20px;
}

/* 让上传居中盒子 */
.ShuangChuan {
	
	width: 100%;
	/* height: 800px; */
	
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
}

/* 上传采集的盒子 */
.ShuangChuanHanBan {
	display: flex;
	width: 650px;
	height: 600px;
	/* background-color: #ff5967; */
	border-radius: 25px;
}

/* 上传左边大盒子============================================= */
.scleftbox {
	width: 260px;
	background-color: #eeeeee;
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
/* 预览图 */
.yulantu {
	width: 220px;
	height: 190px;
	/* background-color: #a00e0e; */
	border-radius: 20px;
	margin-bottom: 10px;
}
.yulantu > img {
	border-radius: 20px;
}
/* 描述 */
.miaosu {
	width: 220px;
	height: 150px;
	background-color: #37ab2c;
	border-radius: 20px;
	margin-bottom: 10px;
}
/* 标签 */
.biaoqian {
	width: 220px;
	height: 150px;
	background-color: #2c43ab;
	border-radius: 20px;
	margin-bottom: 10px;
}
/* 提示的大盒子*/
.tishibox {
	width: 260px;
	height: 50px;
	/* background-color: #ffee00af; */
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 右边大盒子==============================================*/
.scrightbox {
	height: 600px;
	background-color: #ffffff;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

/* 选择画板类型和分类的盒子 */
.scrightbox > div[class='neixing'] {
	border-radius: 10px;
	display: flex;
}

/* 选择画板类型下面的input */
.scrightbox > div[class='neixing'] > input:first-child {
	width: 228px;
	height: 50px;
	border-radius: 10px;
	display: flex;
	margin-right: 10px;
	border: 1px solid rgb(208, 206, 206);
	padding-left: 5px;
}

/* 选择分类的下面的input */
/* .scrightbox > div[class='neixing'] > input:last-child {
	width: 226px !important;
	height: 50px;
	border-radius: 10px;
	display: flex;
	border: 1px solid rgb(214, 214, 214);
	padding-left: 5px;
} */

/* 选择分类的下面的下拉菜单*/
.xiala {
	border-radius: 10px;
	font-size: 15px;
	padding-left: 5px;
}
.xiala > option {
	font-size: 15px;
}

/* 取消和上传的盒子 */
.anniubox {
	display: flex;
	width: 356px;
	height: 50px;
	border-radius: 10px;
	justify-content: end;
}

/* 取消和上传的盒子 按钮*/
.anniubox > button {
	margin-left: 10px;
	width: 62px;
	height: 40px;
	border-radius: 15px;
	border: 1px solid rgb(208, 206, 206);
}
/* 上传的按钮*/
.anniubox > button:last-child {
	background-color: pink;
}

/* 上传文字大小 */
.fontup {
	height: 30px;
	line-height: 30px;
	font-size: 20px;
	margin: 21px 0 33px;
	text-align: center;
}

/* 上传内容图片大盒子 */
.shuangchuantu {
	display: flex;
	flex-wrap: wrap;
	height: 286px;
	/* background-color: #37ab2c; */
	border-radius: 10px;
	justify-content: center;
	align-items: center;
	overflow: auto;
	scrollbar-width: none; /* 隐藏滚动条 */
	background-image: url();
	border: 1px dashed rgba(30, 32, 35, 0.5);
	
	z-index: 999;
}

.shuangchuantu::-webkit-scrollbar {
	width: 0 !important;
}
/* 上传内容图片 小盒子*/
.shuangchuantu > div {
	/* margin-right: 5px;
	margin-bottom: 5px; */
	width: 336px;
	height: 80px;
	/* border: 1px dashed rgba(30, 32, 35, 0.1); */
	border-radius: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.shuangchuantu > div > img {
	width: 202px;
	height: max-content;
	border-radius: 12px;
}
/* .shuangchuantu > div {
	margin-right: 5px;
	margin-bottom: 5px;
	width: 80px;
	height: 80px;
	border: 1px dashed rgba(30, 32, 35, 0.1);
	border-radius: 12px;
} */

/* 提示盒子 */
.tishi {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 输入框上传 */
.tishi > textarea {
	/* text-align: center; */
	padding-left: 12px;
	font-size: 16px;
	width: 208px;
	line-height: 45px;
	height: 45px;
	resize: none;
	border: 1px solid rgba(164, 164, 164, 0.6);
	min-height: auto;
	border-radius: 15px;
}

/* 描述的输入框 */
.getmiaoshu {
	width: 208px;
	height: 136px;
	padding-left: 12px;
	padding-top: 12px;
	border-radius: 15px;
	resize: none;
	border-radius: 15px;
}

/* 标签的的输入框 */
.gitbiaoqian {
	width: 208px;
	height: 136px;
	padding-left: 12px;
	padding-top: 12px;
	border-radius: 15px;
	resize: none;
}

/* 提示的的输入框 */
.yulantu > img {
	width: 220px;
	height: 190px;
}

/* 点击添加图片*/
.dianjitianjia {
	width: 334px;
	height: 85px;
	background-color: #f4f0f0;
	border-radius: 10px;
	border: 1px dashed rgba(30, 32, 35, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Times New Roman', Times, serif;
	font-size: 15px;
	font-weight: 700;
	padding-right: 10px;
}

/* input样式 文件 */
#xuanzhe {
	/* 修改边框样式 */
	/* border: 2px solid #ccc; */
	/* 修改背景颜色 */
	background-color: #f2f2f2;
	/* 修改字体样式 */
	font-size: 14px;
	font-weight: bold;
	width: 325px;
	height: 82px;
	position: absolute;
	color: #37ab2c;
	text-align: center;
}

.fenshe {
	position: relative;
	top: -32px;
	font-size: 14px;
	font-weight: 700;
	color: rgb(255, 119, 142);
	pointer-events: none;
	font-family: '宋体, serif';
}
#xuanzhe::-webkit-file-upload-button {
	/* 修改背景颜色 */
	/* background-color: #9b0202; */
	/* 修改边框样式 */
	border: 1px dashed rgba(255, 255, 255, 0.1);
	/* 修改字体样式 */
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 85px;
	color: rgb(0, 0, 0);
	margin-left: 100px;
}
</style>
